<template>
    <div class="addDevice">
        <el-row style="margin-bottom: 10px; padding-left: 50px">
            <el-col :span="24">
                <label>设备类型：</label>
                <el-select v-model="device_type" placeholder="请选择设备类型" size="mini" style="width: 150px; margin-right: 10px">
                    <el-option v-for="item in device_typeList" :key="item.value" :label="item.label" :value="item.value" width="150px">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div v-if="device_type == '1'">
            <el-form ref="form" :model="form1" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="网关名称" prop="wgmc">
                            <el-input v-model="form1.wgmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="网关标识" prop="wgbs">
                            <el-input v-model="form1.wgbs"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="网关型号" prop="wgxh">
                            <el-select v-model="form1.wgxh" placeholder="请选择" size="mini" style="width: 100%">
                                <el-option v-for="item in internet_typeList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="GPRS卡号" prop="gprsNo">
                            <el-input v-model="form1.gprsNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="出厂日期" prop="ccrq">
                            <el-date-picker v-model="form1.ccrq" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属建筑" prop="parentId">
                            <treeSelect
                                :treeProps="props"
                                :options="treeSelectList"
                                v-model="form1.parentId"
                                :clearable="isClearable"
                                :accordion="isAccordion"
                                :expandNode="false"
                                size="small"
                                width="100%"
                                @getValue="getValue($event)"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="目标IP" prop="mbIp">
                            <el-input v-model="form1.mbIp"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目标端口" prop="mbdk">
                            <el-input v-model="form1.mbdk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冻结数据长度" prop="djsjcd">
                            <el-input type="number" v-model="form1.djsjcd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最大终端数量" prop="zddksl">
                            <el-input type="number" v-model="form1.zddksl"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冻结周期" prop="djzq">
                            <el-input v-model="form1.djzq" placeholder="请输入">
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 30px; color: #1e1e1e">分钟</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="网卡过期时间" prop="wkgqsj">
                            <el-date-picker v-model="form1.wkgqsj" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="排序号" prop="pxh">
                            <el-input type="number" v-model="form1.pxh"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安装地址" prop="azdz">
                            <el-input v-model="form1.azdz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="安装时间" prop="azsj">
                            <el-date-picker v-model="form1.azsj" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安装图片" prop="aztp">
                            <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                            >
                                <img v-if="form1.aztp" :src="form1.aztp" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="device_type == '2'">
            <el-form ref="form" :model="form2" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属网关" prop="sswg">
                            <el-select v-model="form2.sswg" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in wgList"
                                    v-bind:key="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属建筑" prop="parentId">
                            <treeSelect
                                :treeProps="props"
                                :options="treeSelectList"
                                v-model="form2.parentId"
                                :clearable="isClearable"
                                :accordion="isAccordion"
                                :expandNode="false"
                                size="small"
                                width="100%"
                                @getValue="getValue($event)"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="集中器名称" prop="jzqmc">
                            <el-input v-model="form2.jzqmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="集中器地址" prop="jzqdz">
                            <el-input v-model="form2.jzqdz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属频道" prop="sspd">
                            <el-select v-model="form2.sspd" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in sspdList"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="串口波特率" prop="ckbtl">
                            <el-select v-model="form2.ckbtl" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in ckbtl"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="空中波特率" prop="kzbtl">
                            <el-select v-model="form2.kzbtl" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in kzbtl"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否超时回复" prop="sfcshf">
                            <el-radio v-model="form2.sfcshf" label="1">有</el-radio>
                            <el-radio v-model="form2.sfcshf" label="0">无</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="最大中继层" prop="zdzjc">
                            <el-input type="number" v-model="form2.zdzjc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安装时间" prop="azsj">
                            <el-date-picker v-model="form2.azsj" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="安装地址" prop="azdz">
                            <el-input v-model="form2.azdz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="0级信号强度" prop="zeroJxhqd">
                            <el-input type="number" v-model="form2.zeroJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="1级信号强度" prop="oneJxhqd">
                            <el-input type="number" v-model="form2.oneJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="2级信号强度" prop="twoJxhqd">
                            <el-input type="number" v-model="form2.twoJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="3级信号强度" prop="threeJxhqd">
                            <el-input type="number" v-model="form2.threeJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="4级信号强度" prop="fourJxhqd">
                            <el-input type="number" v-model="form2.fourJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="5级信号强度" prop="fiveJxhqd">
                            <el-input type="number" v-model="form2.fiveJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="6级信号强度" prop="sixJxhqd">
                            <el-input type="number" v-model="form2.sixJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="7级信号强度" prop="sevenJxhqd">
                            <el-input type="number" v-model="form2.sevenJxhqd"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="device_type == '3'">
            <el-form ref="form" :model="form3" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属集中器" prop="ssjzq">
                            <el-select v-model="form3.ssjzq" placeholder="请选择" style="width: 100%">
                                <el-option :label="item.label" :value="item.value" v-for="item in jzq" v-bind:key="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属建筑" prop="parentId">
                            <treeSelect
                                :treeProps="props"
                                :options="treeSelectList"
                                v-model="form3.parentId"
                                :clearable="isClearable"
                                :accordion="isAccordion"
                                :expandNode="false"
                                size="small"
                                width="100%"
                                @getValue="getValue($event)"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="采集器名称" prop="cjqmc">
                            <el-input v-model="form3.cjqmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="采集器地址" prop="cjqdz">
                            <el-input v-model="form3.cjqdz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="无线频道" prop="wxpd">
                            <el-select v-model="form3.wxpd" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in sspdList"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="串口波特率" prop="ckbtl">
                            <el-select v-model="form3.ckbtl" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in ckbtl"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="空中波特率" prop="kzbtl">
                            <el-select v-model="form3.kzbtl" placeholder="请选择" style="width: 100%">
                                <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-bind:key="item.value"
                                    v-for="item in kzbtl"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安装时间" prop="azsj">
                            <el-date-picker v-model="form3.azsj" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="安装地址" prop="azdz">
                            <el-input v-model="form3.azdz"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="device_type == '4'">待完善</div>
        <div v-if="device_type == '5'">待完善</div>
    </div>
</template>

<script>
import {LeftTree} from '@/mockData/monitorCenter.js'
import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
import {Utility} from '@/libs/utility'
// import uploadFile from "@/components/customComponents/managementCenter/uploadFile"
export default {
    name: 'addDevice',
    components: {treeSelect},
    // props: ["formData"],
    data() {
        return {
            jzq: [],
            wgList: [
                {
                    label: '测试网关1',
                    value: '1'
                },
                {
                    label: '测试网关3',
                    value: '3'
                },
                {
                    label: '测试网关2',
                    value: '2'
                }
            ],
            device_type: '1',
            device_typeList: Utility.getDictList('deviceType'),
            internet_typeList: Utility.getDictList('internetType'),
            sspdList: Utility.getDictList('sspdList'),
            // 串口波特率
            ckbtl: Utility.getDictList('ckbtl'),
            // 空中波特率
            kzbtl: Utility.getDictList('ckbtl'),
            rules: {
                parentId: [
                    {required: true, message: '请选择所属建筑', trigger: ['blur', 'change']}
                    // {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
                ],
                name: [{required: true, message: '房间名称不能为空', trigger: ['blur', 'change']}],
                sfcl: [{required: true, message: '请选择身份策略', trigger: ['blur', 'change']}],
                djfa: [{required: true, message: '请选择定价方案', trigger: ['blur', 'change']}],
                qybj: [{required: true, message: '请选择启用告警', trigger: ['blur', 'change']}],
                bjyz: [{required: true, message: '请选择报警阈值', trigger: ['blur', 'change']}],
                gtjf: [{required: true, message: '请选择柜台缴费', trigger: ['blur', 'change']}],
                ydcz: [{required: true, message: '请选择移动充值', trigger: ['blur', 'change']}]
            },
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: [],
            form1: {
                parentId: '',
                // 网关名称
                wgmc: '',
                // 网关标识
                wgbs: '',
                // 网关型号  internetType
                wgxh: '',
                // GPRS卡号
                gprsNo: '',
                //出厂日期
                ccrq: '',
                // 所属建筑
                ssjz: '',
                // 目标IP
                mbIp: '',
                // 目标端口
                mbdk: '',
                // 冻结数据长度
                djsjcd: '',
                // 最大终端数量
                zddksl: '',
                // 冻结周期
                djzq: '',
                // 网卡过期时间
                wkgqsj: '',
                // 排序号
                pxh: '',
                // 安装地址
                azdz: '',
                // 安装时间
                azsj: '',
                // 安装图片
                aztp: ''
            },
            form2: {
                parentId: '',
                // 所属网关
                sswg: '',
                // 所属建筑
                ssjz: '',
                // 集中器名称
                jzqmc: '',
                // 集中器地址
                jzqdz: '',
                // 所属频道
                sspd: '',
                // 串口波特率
                ckbtl: '',
                // 空中波特率
                kzbtl: '',
                // 是否超时回复
                sfcshf: 1,
                // 最大中继层
                zdzjc: 2,
                // 安装时间
                azsj: '',
                // 安装地址
                azdz: '',
                // 0级信号强度
                zeroJxhqd: '',
                // 1级信号强度
                oneJxhqd: '',
                // 2级信号强度
                twoJxhqd: '',
                // 3级信号强度
                threeJxhqd: '',
                // 4级信号强度
                fourJxhqd: '',
                // 5级信号强度
                fiveJxhqd: '',
                // 6级信号强度
                sixJxhqd: '',
                // 7级信号强度
                sevenJxhqd: ''
            },
            form3: {
                parentId: '',
                // 所属集中器
                ssjzq: '',
                // 所属建筑
                ssjz: '',
                // 采集器名称
                cjqmc: '',
                // 集中器地址
                jzqdz: '',
                // 采集器地址
                cjqdz: '',
                // 无线频道
                wxpd: '',
                // 串口波特率
                ckbtl: '',
                // 空中波特率
                kzbtl: '',
                // 安装时间
                azsj: '',
                // 安装地址
                azdz: ''
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.initData()
        })
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        onDelete() {
            this.ybList.splice(this.ybList.length - 1, 1)
        },
        cancel() {
            this.$emit('close', '')
        },
        initData() {
            console.log('value....')
            // let treeData = LeftTree
            // let listData = Utility.arrayFlat(treeData, (t) => t.children)
            // treeData = Utility.arrayCascade(listData, (c, p) => c.parentId == p.id)
            this.treeSelectList = LeftTree
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        },
        onSubmit() {
            let that = this
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('111')
                    // that.$emit("close", "")
                    that.step = 2
                }
            })
        },
        onStepOk() {
            var ybList = this.ybList
            let that = this
            let isTrue = true
            ybList?.forEach((item, i) => {
                console.log(that.$refs['formTwo'][i], 'fo...')
                that.$refs['formTwo'][i].validate((valid) => {
                    if (valid) {
                        console.log('获取当前form值')
                        // that.$emit("close", "")
                    } else {
                        isTrue = false
                    }
                })
            })
            console.log(isTrue)
        }
    }
}
</script>

<style lang="scss" scoped>
.ybList {
    .ybContent {
        height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        .ybNum {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            padding: 5px 0 10px 11px;
            margin-bottom: 10px;
        }
    }
    .btnSave {
        text-align: right;
    }
}
.addDiv {
    font-size: 16px;
    background-color: #f9fafc;
    height: 45px;
    line-height: 45px;
    margin-bottom: 20px;
    margin-left: 5px;
    border-radius: 2px;
    padding: 0 18px;
    text-align: right;
    display: flex;
    span {
        font-size: 16px;
        width: 150px;
        text-align: left;
        color: #777;
        label {
            font-size: 16px;
            color: #333;
        }
    }
    .customBtns {
        text-align: right;
        flex: 1;
    }
}
.titleImg {
    margin-bottom: 10px;
}
.addDevice {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border: 1px solid #e0e0e0;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
}
</style>
